<template>
  <div id="articleTableData">
    <el-table :data="articleData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" @sort-change="customSort">
        <el-table-column prop="type"         label="类型"       width="120"></el-table-column>
        <el-table-column prop="title"        label="标题"       width="350"></el-table-column>
        <el-table-column prop="dateCreated"  label="创建时间"   width="180"></el-table-column>
        <el-table-column prop="eventDate"    label="发布时间"   width="180" sortable="custom"></el-table-column>
        <el-table-column prop="clickCounts"  label="阅读量"     width="120" sortable="custom"></el-table-column>
        <el-table-column prop="onTop"        label="置顶首页"   width="120"></el-table-column>
        <el-table-column prop="status"       label="状态"       width="120"></el-table-column>
        <el-table-column                     label="操作"       min-width="230" class="controllBtn" >
            <template scope="scope" >
                <buttonBox :scope="scope" @updateView="updateView"></buttonBox>
            </template>
        </el-table-column>
    </el-table>
    <!-- {{articleData}} -->
  </div>
</template>
<script>
    import {changeOnTop,deleteArticle} from 'api/webArticle';
    import buttonBox from './_button.vue'
    export default {
        components:{
            buttonBox
        },
        props:['articleData'],
        data(){
            return{
                
            }
        },
        created(){
        },
        methods:{
            updateView(){
                this.$emit("updateView");
            },
            customSort(custom){
                // console.log(custom);
                this.$emit('changeCustom',custom.prop,custom.order);
                this.$emit('updateView');
            },
            handleClick(row) {
                this.$router.push({name:'reviseArticle',query:{'id':row.id,'uuid':row.uuid}})
                // console.log(row);
            },
            setOnTop(row){
                //  置顶
                changeOnTop(row.uuid)
                  .then((response)=>{
                    let data=response.data;
                    this.$emit('updateView');
                  })
            },
            deleteRow(row,index){
                this.$confirm('您确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 删除文章
                    deleteArticle(row.uuid)
                    .then((response)=>{
                        let data=response.data;
                        if(data.resultCode=='200'){
                            this.$emit('updateView');
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                })
            }
        }
    }
</script>
<style lang="less">
    #articleTableData .el-table{
        th>.cell{
            text-align: left;
        }
        .cell{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
        }       
    }
</style>
